<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./lib/vue.js"></script>
    <script src="./lib//vant@2.12.54_lib_vant.min.js"></script>
    <link rel="stylesheet" href="./lib//vant@2.12.54_lib_index.css">

    <style>
        .box {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-bottom: 5vh;
        }

        .his_box {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            padding: 1vh 5vw 1vh;
        }

        .box_son {
            width: 13vw;
            height: 13vw;
            font-size: 13px;
            line-height: 13vw;
            text-align: center;
            border-radius: 8px;
        }

        .his_son {
            width: 13vw;
            height: 13vw;
            font-size: 13px;
            margin: 1vh 4vw;
            line-height: 13vw;
            text-align: center;
            border-radius: 8px;
        }

        .grey {
            background-color: #d3d0d0;
        }

        .green {
            background-color: #31d46a;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app" style="position: relative;height: 100vh;">
        <!-- 第几局 -->
        <div style="text-align: center;font-size: 22px;padding: 3vh 0;">第{{game}}局<i
                style="font-style: normal; margin-left: 5vw;font-size: 14px;">倍率：{{count}}</i></div>

        <!-- 玩家 -->
        <div class="box">
            <div v-for="(item,index) in gameplayer" :key="index" class="box_son"
                :class="{'green': gameplayer[index].player, 'grey': !gameplayer[index].player}"
                @click="ChoosePlayer(index)">{{item.name}}
            </div>
        </div>

        <!-- 杠 -->
        <van-cell-group title="杠" :border="false" style="height: 20vh; display: flex;justify-content: space-around;">
            <div style="width: 40vw;text-align: center;"><van-button type="info" @click="isgangShow = true"
                    style="border-radius: 10px;">杠别人</van-button>
                <div style="position: relative; margin-top: 1vh;font-size: 14px;color: #9a9999;"
                    v-for="(item,index) in gangdata" :key="index" v-if="gangdata">
                    "{{item.casher}}"杠"{{item.payer}}"
                    <i style="position: absolute;right: 0;font-style: normal;color: crimson;"
                        @click="delgang(index)">删除</i>
                </div>
            </div>
            <div style="width: 40vw;text-align: center;"><van-button type="info" @click="ismygangShow = true"
                    style="border-radius: 10px;">自摸杠</van-button>
                <div style="position: relative; margin-top: 1vh;font-size: 14px;color: #9a9999;"
                    v-for="(item,index) in mygangdata" :key="index" v-if="mygangdata">
                    "{{item}}"自摸杠
                    <i style="position: absolute;right: 0;font-style: normal;color: crimson;"
                        @click="delmygang(index)">删除</i>
                </div>
            </div>
        </van-cell-group>
        <van-popup v-model="isgangShow" round position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="谁杠谁" :columns="isgangPicker" @confirm="gangonConfirm"></van-picker>
        </van-popup>
        <van-popup v-model="ismygangShow" round position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="自摸杠" :columns="mygangonPicker" @confirm="mygangonConfirm"></van-picker>
        </van-popup>

        <!-- 赢家 -->
        <van-cell-group title="选择赢家" :border="false" style="height: 20vh;margin-bottom: 5vh;text-align: center;">
            <van-button type="primary" @click="iswinnerShow = true"
                style="border-radius: 10px;width: 80vw;">选择赢家</van-button>
            <div style="position: relative;margin-top: 1vh;font-size: 14px;color: #9a9999;" v-if="winnerdata">
                "{{winnerdata}}"获胜
                <i style="position: absolute;right: 10vw;font-style: normal;color: crimson;" @click="delWinner">删除</i>
            </div>
        </van-cell-group>
        <van-popup v-model="iswinnerShow" round position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="选择赢家" :columns="winnerPicker" @confirm="winnerConfirm"></van-picker>
        </van-popup>

        <!-- 结算 本局作废 下一局 -->
        <div style="position: absolute;bottom: 3vh;width: 100vw;">
            <van-cell-group style="display: flex;justify-content: space-around;">
                <van-button type="primary" style="border-radius: 10px;width: 25vw;" @click="billing">结算</van-button>
                <van-button type="warning" style="border-radius: 10px;width: 25vw;"
                    @click="HistoryPopup">目前记录</van-button>
                <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="border-radius: 10px;width: 25vw;"
                    @click="nextGame">下一局</van-button>
            </van-cell-group>
        </div>
        <van-popup v-model="HistoryShow" round position="bottom" :style="{ height: '80%' }"
            style="background-color: #fff;">
            <div class="his_box">
                <div class="his_son" v-for="(item,index) in historyPlayer" :key="index" @click="InquiryHistory(index)"
                    :class="{'green': item.player,'grey': !item.player}">{{item.name}}</div>
            </div>
            <!-- 全部 -->
            <div style="display: flex;flex-wrap: wrap;justify-content: space-around;font-size: 13px;color: #9a9999;">
                <div style="margin: 0 1vw;" v-for="(item,index) in historyPlayer" :key="index"
                    v-if="index>0&&historyPlayer[0].player">
                    {{item.name}} {{item.amount>0?`+${item.amount}`:item.amount}}</div>
            </div>
            <van-cell-group :title="`第${item.game}局`" style="height: 20vh; display: flex;justify-content: space-around;"
                v-if="historyPlayer[0].player" v-for="(item,index) in historyGames" :key="index">
                <div
                    style="display: flex;flex-direction: column; height: 20vh;width: 90vw;border-radius: 10px;background-color: #edebeb;">
                    <!-- 玩家 -->
                    <div
                        style="display: flex;justify-content: space-around;margin-top: 1vh;font-size: 20px;font-weight: 550;">
                        <div v-for="(items,indexs) in item.player" :key="indexs">{{items}}</div>
                    </div>
                    <!-- 赢家 -->
                    <div style="text-align: center;font-size: 14px;margin-top: 1vh;">
                        赢家:{{item.winner}}
                    </div>
                    <!-- 杠 -->
                    <div style="text-align: center;font-size: 14px;margin-top: 1vh;">
                        <div v-for="(items,indexs) in item.gang" :key="indexs">"{{items.casher}}"杠"{{items.payer}}"
                        </div>
                    </div>
                    <!-- 自摸杠 -->
                    <div style="text-align: center;font-size: 14px;margin-top: 1vh;">
                        <div v-for="(items,indexs) in item.mygang" :key="indexs">"{{items}}"自摸杠</div>
                    </div>
                </div>
            </van-cell-group>
            <!-- 玩家 -->
            <div style="display: flex;flex-wrap: wrap; font-size: 14px;color: #727272;" v-if="!historyPlayer[0].player">
                <div v-for="(item,index) in historyamount" :key="index" style="margin: 0 3vw;">
                    <div v-for="(items,indexs) in item" :key="indexs" v-if="items.amount>0">
                        <i style="font-style: normal;width: 15vw;">"{{items.branch}}"</i>
                        给
                        <i style="font-style: normal;width: 15vw;">"{{items.master}}"</i>
                        <i style="font-style: normal;color: #000;">{{items.amount}}元</i>
                    </div>
                    <div v-for="(items,indexs) in item" :key="indexs" v-if="items.amount<0">
                        <i style="font-style: normal;width: 15vw;">"{{items.master}}"</i>
                        给
                        <i style="font-style: normal;width: 15vw;">"{{items.branch}}"</i>
                        <i style="font-style: normal;color: #000;">{{-items.amount}}元</i>
                    </div>
                </div>
            </div>
        </van-popup>

    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    gameplayer: [], //所有玩家
                    count: 0, //倍率
                    game: 1, //第一局
                    historyPlayer: [{ name: '全部', player: true }], //展示历史记录(按人头算) name姓名player是否被选中amount金额
                    historyGames: [], //展示历史记录(按局数算) game第几局 player[]该局玩家 winner赢家 gang[{casher,payer}]杠 mygang[]自摸杠
                    historyamount: [], //统计总历史金额[[{},{}],[{}],[{}]] master主 branch次 amount金额
                    hisIndex: 0, //展示历史记录的下标
                    isgangShow: false, //杠弹出层
                    ismygangShow: false, //自摸杠弹出层
                    iswinnerShow: false, //选择赢家弹出层
                    HistoryShow: false, //查看历史弹出层
                    isgangPicker: [ //杠选择器
                        { values: [] }, { values: [], defaultIndex: 1 }
                    ],
                    mygangonPicker: [{ values: [] }],
                    winnerPicker: [{ values: [] }],
                    gangdata: [], //杠data
                    mygangdata: [], //自摸杠data
                    winnerdata: "", //赢家data
                    allgamesData: [], //所有游戏记录
                }
            },
            methods: {
                ChoosePlayer(index) {
                    this.$set(this.gameplayer[index], 'player', !this.gameplayer[index].player)
                    console.log(this.gameplayer);
                },
                gangonConfirm(value, index) {//杠
                    console.log(value, index)
                    const obj = {
                        casher: value[0],
                        payer: value[1],
                        game: this.game,
                        tradeType: 2,
                        amount: this.count * 2,
                        remark: `第${this.game}局,${value[0]}杠${value[1]}`
                    }
                    this.gangdata.push(obj)
                    console.log(this.gangdata);
                    this.isgangShow = false
                },
                mygangonConfirm(value, index) {//自摸杠
                    console.log(value, index)
                    this.mygangdata.push(value[0])
                    this.ismygangShow = false
                },
                winnerConfirm(value, index) {//选择赢家
                    console.log(value, index)
                    this.winnerdata = value[0]
                    this.iswinnerShow = false
                },
                delWinner() {
                    this.winnerdata = ""
                },
                delgang(index) {
                    const gangdata = this.gangdata
                    gangdata.splice(index, 1)
                    this.gangdata = gangdata
                    console.log(this.gangdata);
                },
                delmygang(index) {
                    const mygangdata = this.mygangdata
                    mygangdata.splice(index, 1)
                    this.mygangdata = mygangdata
                },
                nextGame() {
                    //检验数据
                    let dataCheck = false
                    if (this.winnerdata !== "") {
                        let count = 0
                        let winner = false
                        this.gameplayer.map(item => {
                            if (item.player === true) {
                                if (item.name === this.winnerdata) {
                                    winner = true
                                }
                                count++
                            }
                        })
                        if (count === 4 && winner) {
                            dataCheck = true
                        }
                    }
                    //写入allgamedata
                    if (dataCheck) {
                        vant.Dialog.confirm({
                            message: '确认四位玩家正确'
                        }).then(() => {
                            const arr = []
                            //写入赢家
                            const winnerArr = this.triad(this.winnerdata, 1, this.game, this.count, `第${this.game}局，获得胜利`)
                            winnerArr.map(item => {
                                arr.push(item)
                            })

                            //写入杠
                            this.gangdata.map(item => {
                                arr.push(item)
                            })

                            //写入自摸杠
                            this.mygangdata.map(item => {
                                const mygangArr = this.triad(item, 3, this.game, this.count, `第${this.game}局，${item}自摸杠`)
                                mygangArr.map(item => {
                                    arr.push(item)
                                })
                            })
                            this.allgamesData = this.allgamesData.concat(arr)
                            console.log(this.allgamesData)
                            this.gangdata = []
                            this.mygangdata = [],
                                this.winnerdata = ""
                            this.game++
                        })
                    } else {
                        this.triad()
                        vant.Toast.fail('数据有误')
                    }
                },
                triad(winner, tradeType, game, amount, remark) {//三合一 
                    const arr = []
                    this.gameplayer.map(item => {
                        if (item.player === true) {
                            if (item.name !== winner) {
                                arr.push({
                                    casher: winner,
                                    payer: item.name,
                                    tradeType: tradeType,
                                    game: game,
                                    amount: amount,
                                    remark: remark
                                })
                            }
                        }
                    })
                    return arr
                },
                HistoryPopup() {//打开历史记录遮罩层
                    //全部
                    for (let i = 1; i < this.historyPlayer.length; i++) {
                        this.historyPlayer[i].amount = 0
                    }
                    //按人头算
                    for (let i = 1; i < this.historyPlayer.length; i++) {
                        const name = this.historyPlayer[i].name
                        this.allgamesData.map(item => {
                            if (item.casher === name) {
                                this.historyPlayer[i].amount = this.historyPlayer[i].amount + item.amount
                            } else if (item.payer === name) {
                                this.historyPlayer[i].amount = this.historyPlayer[i].amount - item.amount
                            }
                        })
                    }
                    console.log(this.historyPlayer);
                    //按局数算 
                    const game = this.allgamesData[this.allgamesData.length - 1].game
                    this.historyGames = []
                    for (let i = 1; i <= game; i++) {
                        const player = []
                        let winner = ''
                        const gang = []
                        const mygang = []
                        let count = 3 //mygang计数
                        this.allgamesData.map(item => {
                            if (i === item.game) {
                                if (item.tradeType === 1) {//player winner
                                    winner = item.casher
                                    player.push(item.payer)
                                } else if (item.tradeType === 2) {//gang
                                    const obj = {
                                        casher: item.casher,
                                        payer: item.payer
                                    }
                                    gang.push(obj)
                                } else if (item.tradeType === 3) {//mygang
                                    count--
                                    if (count === 0) {
                                        mygang.push(item.casher)
                                        count = 3
                                    }
                                }
                            }
                        })
                        player.push(winner)
                        const historyGames = {
                            game: i,
                            player: player,
                            winner: winner,
                            gang: gang,
                            mygang: mygang
                        }
                        this.historyGames.push(historyGames)
                        console.log(this.historyGames);
                    }
                    //其他成员历史
                    this.historyamount = []
                    for (let i = 1; i < this.historyPlayer.length - 1; i++) {
                        const OtherPlayer = [] //[{},{},{}] 
                        const master = this.historyPlayer[i].name
                        for (let j = i + 1; j <= this.historyPlayer.length - 1; j++) {
                            const obj = {
                                master: master,
                                branch: this.historyPlayer[j].name,
                                amount: 0
                            }
                            OtherPlayer.push(obj)
                        }
                        this.allgamesData.map(item => {
                            if (item.casher === master) {
                                OtherPlayer.map(items => {
                                    if (items.branch === item.payer) {
                                        items.amount = items.amount + item.amount
                                    }
                                })
                            } else if (item.payer === master) {
                                OtherPlayer.map(items => {
                                    if (items.branch === item.casher) {
                                        items.amount = items.amount - item.amount
                                    }
                                })
                            }
                        })
                        this.historyamount.push(OtherPlayer)
                    }
                    console.log(this.historyamount);
                    this.HistoryShow = true
                },
                InquiryHistory(index) {
                    this.hisIndex = index
                },
                billing() {
                    const allgamesData = JSON.stringify(this.allgamesData)
                    localStorage.setItem('allgamesData', allgamesData);
                    window.location.href = './index.html'
                }
            },
            mounted() {
                const params = new URLSearchParams(window.location.search)
                const player = JSON.parse(params.get('player'))
                //gameplayer
                for (let i = 0; i < player.length; i++) {
                    const obj = {
                        name: player[i],
                        player: i < 4 ? true : false
                    }
                    this.gameplayer.push(obj)
                    //historyPlayer
                    this.historyPlayer.push({
                        name: player[i],
                        player: false,
                        amount: 0
                    })
                }
                //count
                this.count = parseFloat(params.get('count'))
                //gang
                this.$set(this.isgangPicker[0], 'values', player)
                this.$set(this.isgangPicker[1], 'values', player)
                this.$set(this.mygangonPicker[0], 'values', player)
                //winner
                this.$set(this.winnerPicker[0], 'values', player)
            },
            watch: {
                hisIndex(newval, oldval) {
                    this.$set(this.historyPlayer[oldval], 'player', !this.historyPlayer[oldval].player)
                    this.$set(this.historyPlayer[newval], 'player', !this.historyPlayer[newval].player)
                }
            }
        })
    </script>
</body>

</html>